<template>
  <view>
    <u-card
      :show-head="false"
      :show-foot="false"
      margin="10rpx 0"
      :body-style="taskPriority[getEndTimeColor(info.priority)]"
      @click="showTaskInfo"
    >
      <view slot="body">
        <view class="task-title">{{ info.taskName }}</view>
        <view
          class="u-line-1 u-m-t-10 u-m-b-10 u-tips-color"
          v-if="info.taskDesc"
          >{{ info.taskDesc }}</view
        >
        <view class="u-flex u-row-between u-m-t-20">
          <view class="u-flex-1 u-flex">
            <template v-if="![14].includes(info.taskType)">
              <u-tag
                shape="circle"
                class="u-tag-b-r-50"
                border-color="transparent"
                :type="TASK_STATUS_TYPES_MAP[info.taskStatus].color"
                :text="
                  isFinance(info.taskType) &&
                  TASK_STATUS_TYPES_MAP[info.taskStatus].label
                    ? TASK_STATUS_TYPES_MAP[info.taskStatus].label.replace(
                        '待反馈',
                        '待提交'
                      )
                    : TASK_STATUS_TYPES_MAP[info.taskStatus].label
                "
              ></u-tag>
            </template>
            <template v-else>
              <u-tag
                shape="circle"
                class="u-tag-b-r-50"
                border-color="transparent"
                :type="CHECK_STATUS[info.ethicsStatus]?.color"
                :text="CHECK_STATUS[info.ethicsStatus]?.label"
              ></u-tag>
            </template>
            <view
              v-if="info.taskType !== null && info.taskType !== 1"
              class="frontTask u-m-l-10"
            >
              <u-avatar
                :size="46"
                bg-color="#1890ff"
                :text="
                  getNameShort(
                    isFinance(info.taskType)
                      ? info.taskName
                      : TASKTYPES_MAP[info.taskType],
                    'first'
                  )
                "
              ></u-avatar>
            </view>
            <view
              v-if="info.frontTaskId && info.frontTaskId.length > 0"
              class="frontTask u-m-l-10"
            >
              <u-avatar :size="46" bg-color="#1890ff" :text="'前'"></u-avatar>
            </view>
            <!-- <u-icon name="clock" :size="20"></u-icon> -->
            <u-icon
              v-if="info.milepost"
              class="u-m-l-10"
              name="flag"
              custom-prefix="custom-icon"
              color="#1890ff"
              :size="40"
            ></u-icon>
            <view
              v-if="info.endTime"
              class="time u-m-l-10"
              :class="
                new Date() > new Date(Date.parse(info.endTime))
                  ? 'error'
                  : 'default'
              "
              ><u-icon name="clock"></u-icon
              >{{ formatDate(info.endTime) }}</view
            >
          </view>
          <view v-if="avatarUserType" class="avatar">
            <u-avatar
              :size="70"
              bg-color="#dddddd"
              :text="
                getNameShort(
                  avatarUserType?.list[0][avatarUserType?.key],
                  'last'
                )
              "
              style="font-size: 14rpx; color: #fff"
            ></u-avatar>
            <u-avatar
              v-if="avatarUserType?.list.length > 1"
              :size="66"
              :text="'...'"
              style="margin-left: -10px"
            >
            </u-avatar>
          </view>
        </view>
        <view v-if="info.approvalParamValue" class="u-m-t-20">
          <text class="u-tips-color">{{
            info.approvalParamType === 'ROLE'
              ? '当前经办角色：'
              : '当前经办人：'
          }}</text
          ><text class="u-content-color">{{ info.approvalParamValue }}</text>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import { toRefs } from 'vue';
import { getNameShort } from '@/utils/tools';
import { TASK_STATUS_TYPES_MAP, TASKTYPES_MAP, CHECK_STATUS } from '../index';

const props = defineProps<{
  info: any;
  projectInfo: any;
}>();

const { info, projectInfo } = toRefs(props);

const avatarUserType = computed(() => {
  if (
    info.value.responsibilityUserList &&
    info.value.responsibilityUserList.length > 0
  ) {
    return { list: info.value.responsibilityUserList, key: 'name' };
  }
  if (
    info.value.responsibilityRoleList &&
    info.value.responsibilityRoleList.length > 0
  ) {
    return { list: info.value.responsibilityRoleList, key: 'roleName' };
  }
  return null;
});

const formatDate = (time: string): string => {
  if (!time) {
    return '';
  }
  return time.split(' ')[0];
};
const isFinance = (status: number) => {
  return [8, 10, 14].includes(status);
};
enum PriorityEnum {
  general = 1, // 1：一般
  urgent = 2, // 2：紧急
  high = 3, // 3：高
}
// 结束事件颜色
function getEndTimeColor(type: number) {
  switch (type) {
    case PriorityEnum.general:
      return 'default';
    case PriorityEnum.urgent:
      return 'warning';
    case PriorityEnum.high:
      return 'error';
  }
  return '';
}

const taskPriority: any = {
  warning: {
    'border-left': '8rpx solid #ff9900',
  },
  error: {
    'border-left': '8rpx solid #fa3534',
  },
};

const showTaskInfo = () => {
  // 暂不支持主合同，付款登记，伦理初始审查任务类型的查看
  if ([8, 10, 14].includes(info.value.taskType)) {
    uni.showToast({
      title: '小程序暂不支持，请前往pc端查看/操作',
      icon: 'none',
      duration: 2000,
    });
    return;
  }
  const pInfo = {
    projectName: projectInfo.value.projectName,
    projectType: projectInfo.value.projectType,
    drugRegister: projectInfo.value.drugRegister,
    stages: projectInfo.value.stages,
    projectNo: projectInfo.value.projectNo,
  };
  (uni as any).$Router.push({
    name: 'taskDetails',
    params: {
      taskId: info.value.taskId,
      tab: info.value.taskStatus === 11 ? 'filelist' : '',
      projectInfo: pInfo,
    },
  });
};
</script>
<style lang="scss">
.task-title {
  font-size: 30rpx;
  font-weight: bold;
}
.time {
  text-align: center;
  color: #fff;
  line-height: 50rpx;
  display: inline-block;
  border-radius: 25rpx;
  padding: 0 25rpx;
}
.default {
  color: #666;
  background-color: #d7d7d7;
}
.warning {
  background-color: $uni-color-warning;
}
.error {
  background-color: $uni-color-error;
}
.avatar,
.frontTask {
  text {
    font-size: 28rpx !important;
    color: #fff !important;
  }
}
</style>
